<template>
    <div class="denglu">
        <h1>密码登录</h1>
        <div class="box">
           <input type="text" placeholder="手机/用户名" v-model="from.phone">
        </div>
        <div class="box">
           <input type="password" placeholder="密码" v-model="from.pass">
        </div>
        <div class="button">
           <button  @click="button_click" >登录</button>
        </div>
        <div class="footer">
           <span @click="phonedl" >手机号登录</span>
           <span @click="wangji" >忘记密码</span>
        </div>

    </div>
</template>

<script>
import {api_user_login} from '../dmh/ulits/api'
export default {
    data(){
        return{
            from:{phone:null,pass:null}
        }
    },
    methods:{
        // 手机号登录跳转函数
        phonedl(){   },
        // 忘记密码跳转函数
        wangji(){},
        //点击发送请求验证
        button_click(){  
           if(this.from.phone&&this.from.pass){
            api_user_login({ phone:this.from.phone,pass:this.from.pass }).then((res)=>{
            console.log(res.data);
            if(res.data.code==200){
                localStorage.setItem('token',res.data.token)
                let userinfo = JSON.stringify(res.data.userinfo)
                localStorage.setItem('userinfo',userinfo)
               localStorage.setItem('id',res.data.userinfo.id)
                alert('登录成功')
                this.$router.push('/index')
            }else if(res.data.code==400){
                alert('账号或密码错误,登陆失败!')
            }
          })
        }else{
            alert('账号密码不能为空')
        }
        }
    }

}
</script>

<style scoped>
 *{
  margin: 0;
  padding: 0;
}

html,body{
  width: 100%;
  height: 100%;
}
.denglu{
  padding: 20px;
}
h1{
    padding-top:100px;
}
.box{
    width: 100%;
    height: 80px;
}
input{
    width: 90%;
    height: 60px;
    border: none;
    padding-left: 10px;
    outline: none;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
}
.button{
    width: 100%;
    height: 80px;
    text-align: center;
}
button{
    width: 80%;
    height: 45px;
    border-radius: 45px;
    border: none;
    background-color: #ccc;
}
.footer{
    display: flex;
    justify-content: space-between;
}
</style>